<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="el-form-item__label">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="收房合同号" prop="id">
              <el-input v-model="form.id" disabled="true"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-button
            size="mini"
            round
            type="warning"
            @click="dialogSelectVisible = true">收房合同查询
          </el-button>
        </el-col>
        <el-dialog
          title="收房合同列表"
          :visible.sync="dialogSelectVisible"
          width="40%">
          <span>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column label="业主" align="center" prop="ownerName"/>
              <el-table-column label="房产信息" align="center" prop="houseName"/>
              <el-table-column label="签约日期" align="center" prop="conInfoTime"/>
              <el-table-column label="操作" align="center">
              <template slot-scope="scope">
               <el-tag type="danger" @click="selectById(scope.row)"><i class="el-icon-check">&emsp;选中</i></el-tag>
              </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"/>
          </span>
        </el-dialog>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收房合同编号" prop="sfContractNo">
            <el-input v-model="form.sfContractNo" placeholder="请输入收房合同号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="小区(使用楼盘名)" prop="premiseName">
            <el-input v-model="form.premiseName" placeholder="请输入小区(使用楼盘名)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房产信息" prop="houseName">
            <el-input v-model="form.houseName" placeholder="请输入房产信息" />
          </el-form-item>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产权地址" prop="cqAddress">
            <el-input v-model="form.cqAddress" placeholder="请输入产权地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产证书编号" prop="houseZsNo">
            <el-input v-model="form.houseZsNo" placeholder="请输入房产证书编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="业主姓名" prop="ownerName">
            <el-input v-model="form.ownerName" placeholder="请输入业主姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业主联系方式" prop="ownerMobile">
            <el-input v-model="form.ownerMobile" placeholder="请输入业主手机号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
           <el-form-item label="签约人姓名" prop="signUserName">
             <el-input v-model="form.signUserName" placeholder="请输入签约人(甲方)" />
           </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="签约人电话" prop="signUserMobile">
              <el-input v-model="form.signUserMobile" placeholder="请输入签约人手机号" />
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="物业交割时间" prop="wyjgDate">
            <el-date-picker clearable size="small" style="width: 200px"
                            v-model="form.wyjgDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择物业交割时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="解约类型" prop="terminationType">
            <el-select v-model="form.terminationType" placeholder="请选择解约类型">
              <el-option label="合同到期" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="应收" prop="accountsReceivable">
        <div class="tableDate1">
          <div class="button" style="width:3%;float:right;">
            <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
            <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
          </div>
        </div>
        <el-table
          :data="tableData1"
          ref="table"
          tooltip-effect="dark"
          border
          stripe
          style="width: 95%"
          @selection-change='selectRow'>
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="金额(元)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.loveer" @change="yingtui(scope.row.loveer)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.beizhu"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="应退" prop="finalStatement">
        <div class="tableDate2">
          <div class="button" style="width:3%;float:right;">
            <P><el-button class="el-icon-plus" @click.prevent="addRow1()"></el-button></P>
            <p><el-button class="el-icon-minus" @click.prevent="delData1()"></el-button></p>
          </div>
        </div>
        <el-table
          :data="tableData2"
          ref="table"
          tooltip-effect="dark"
          border
          stripe
          style="width: 95%"
          @selection-change='selectRow'>
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="金额(元)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.money" @change="yingshou(scope.row.money)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.beizhu"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">下一步</el-button>
      </el-form-item>

      <span  :size="500" v-model="sum" v-if="this.sum<0">合计应退{{-this.sum}}元</span>
      <span v-model="sum" :size="500" v-if="this.sum>0">合计应收{{this.sum}}元</span>
    </el-form>
</template>

<script>
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/shoufang/contract";
import { listTermination, getTermination, delTermination, addTermination, updateTermination } from "@/api/shoufang/termination";
export default {
  name: "Add",
  data(){
     return{
        form:{

        },
       sum:0,
       sumtotal:0,
       sumtotal2:0,
       total:0,
       tableData:[],
       queryParams:{
          pageNum:1,
          pageSize:3
       },
       rules:{
         id: [
           {required: true, message: '请输入收房合同号', trigger: 'blur'},
         ],
         sfContractNo: [
           {required: true, message: '请输入收房合同编号', trigger: 'blur'},
         ],
         houseName: [
           {required: true, message: '请输入房产信息', trigger: 'blur'},
         ],
         cqAddress: [
           {required: true, message: '请输入产权地址', trigger: 'blur'},
         ],
         houseZsNo: [
           {required: true, message: '请输入房产证书编号', trigger: 'blur'},
         ],
         ownerName: [
           {required: true, message: '请输入业主信息', trigger: 'blur'},
         ],
         ownerMobile: [
           {required: true, message: '请输入业主联系方式', trigger: 'blur'},
         ],
         signUserName: [
           {required: true, message: '请输入签约人姓名', trigger: 'blur'},
         ],
         signUserMobile: [
           {required: true, message: '请输入签约人电话', trigger: 'blur'},
         ],
       },
       dialogSelectVisible:false,
       historyForm:{

       },
       tableData1: [{
         rowNum: 1,
       },],
       tableData2: [{
         rowNum: 1,
       },]
     }
  },
  methods:{
    //应退
    yingtui(rows){
      this.sumtotal+=Number(rows)
      this.sum=this.sumtotal-this.sumtotal2
    },
    //应收
    yingshou(rows){
      this.sumtotal2+=Number(rows)
      this.sum=this.sumtotal-this.sumtotal2
    },
    //合计
    heji(){

    },
    selectById(row) {
      this.form = row
      this.dialogVisible = false
    },
    getList() {
      listContract(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTermination(this.form).then(response => {
              this.msgSuccess("录入成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTermination(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
  },
    // 增加行
    addRow () {
      var list = {
        rowNum: '',
      }
      this.tableData1.unshift(list)
    },
    // 获取表格选中时的数据
    selectRow (val) {
      this.selectlistRow = val
    },
    // 删除选中行
    delData () {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData1.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData1.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.tableData1.clearSelection()
    },
    // 增加行
    addRow1 () {
      var list = {
        rowNum: '',
        }
      this.tableData2.unshift(list)
    },
    // 获取表格选中时的数据
    selectRow1 (val) {
      this.selectlistRow = val
    },
    // 删除选中行
    delData1 () {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData2.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData2.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.tableData2.clearSelection()
    },
 },
  created() {
      this.getList()
  }
}
</script>

<style scoped>
.el-form-item__label {
  text-align: justify;
}
</style>
